<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="title">
        <text>万能商户助手</text>
        <view class="plus-tag">
          <image src="/static/diamond.png" mode="aspectFit"></image>
          <text>PLUS</text>
        </view>
      </view>
      <view class="header-right">
        <view class="dots">
          <text class="dot"></text>
          <text class="dot"></text>
          <text class="dot"></text>
        </view>
        <view class="circle-btn">
          <text class="iconfont icon-scan"></text>
        </view>
      </view>
    </view>

    <!-- 交易金额卡片 -->
    <view class="transaction-card">
      <view class="transaction-title">今日交易额(元)</view>
      <view class="transaction-amount">0.00</view>
      <view class="transaction-info">
        <text class="transaction-date">2025/09/16 星期二</text>
        <text class="transaction-count">• 交易0笔</text>
      </view>
    </view>

    <!-- 快捷功能区 -->
    <view class="quick-functions">
      <view class="function-item">
        <view class="function-icon bg-pink">
          <text class="iconfont icon-record"></text>
        </view>
        <view class="function-text">
          <text class="function-title">交易记录</text>
          <text class="function-desc">查看交易信息</text>
        </view>
      </view>
      <view class="function-item">
        <view class="function-icon bg-yellow">
          <text class="iconfont icon-merchant"></text>
        </view>
        <view class="function-text">
          <text class="function-title">商户管理</text>
          <text class="function-desc">查看商户信息</text>
        </view>
      </view>
    </view>

    <!-- 认证提示 -->
    <view class="auth-tip">
      <text>您需要进行认证（维铭家用电器店）</text>
      <view class="auth-buttons">
        <button class="auth-btn alipay-btn">
          <text class="iconfont icon-alipay"></text>
          <text>支付宝认证</text>
        </button>
        <button class="auth-btn wechat-btn">
          <text class="iconfont icon-wechat"></text>
          <text>微信认证</text>
        </button>
      </view>
      <view class="indicator">
        <text class="dot active"></text>
      </view>
    </view>

    <!-- 功能图标区 -->
    <view class="function-grid">
      <view class="grid-row">
        <view class="grid-item">
          <view class="grid-icon bg-light-red">
            <text class="iconfont icon-device"></text>
          </view>
          <text class="grid-text">绑定设备</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-blue">
            <text class="iconfont icon-import"></text>
          </view>
          <text class="grid-text">商户进件</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-blue">
            <text class="iconfont icon-upgrade"></text>
          </view>
          <text class="grid-text">商户升级</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-orange">
            <text class="iconfont icon-card"></text>
          </view>
          <text class="grid-text">卡片认证</text>
        </view>
      </view>
      
      <view class="grid-row">
        <view class="grid-item">
          <view class="grid-icon bg-light-orange">
            <text class="iconfont icon-store"></text>
          </view>
          <text class="grid-text">智能分店码</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-purple">
            <text class="iconfont icon-report"></text>
          </view>
          <text class="grid-text">查账报表</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-pink">
            <text class="iconfont icon-account"></text>
          </view>
          <text class="grid-text">账本查询</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-red">
            <text class="iconfont icon-coupon"></text>
          </view>
          <text class="grid-text">优惠券</text>
        </view>
      </view>
      
      <view class="grid-row">
        <view class="grid-item">
          <view class="grid-icon bg-light-green">
            <text class="iconfont icon-bank"></text>
          </view>
          <text class="grid-text">云银商户</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-yellow">
            <text class="iconfont icon-search"></text>
          </view>
          <text class="grid-text">进件预查询</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-orange">
            <text class="iconfont icon-service"></text>
          </view>
          <text class="grid-text">客服中心</text>
        </view>
        <view class="grid-item">
          <view class="grid-icon bg-light-purple">
            <text class="iconfont icon-follow"></text>
          </view>
          <text class="grid-text">关注公众号</text>
        </view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tip">
      <view class="tip-content">
        <text class="iconfont icon-close"></text>
        <text>关注万能商户助手公众号，及时获取最新福利</text>
      </view>
      <button class="follow-btn">去关注</button>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <text class="iconfont icon-home"></text>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item">
        <text class="iconfont icon-security"></text>
        <text class="tab-text">会员中心</text>
      </view>
      <view class="tab-item">
        <text class="iconfont icon-user"></text>
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      transactionAmount: '0.00',
      transactionCount: 0,
      currentDate: '2025/09/16',
      weekDay: '星期二',
      merchantName: '维铭家用电器店'
    }
  },
  onLoad() {
    // 可以在这里获取实际数据
    this.getCurrentDate();
  },
  methods: {
    getCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      
      const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
      const weekDay = weekDays[date.getDay()];
      
      this.currentDate = `${year}/${month}/${day}`;
      this.weekDay = `星期${weekDay}`;
    },
    goToTransactionRecord() {
      uni.navigateTo({
        url: '/pages/transaction/record'
      });
    },
    goToMerchantManagement() {
      uni.navigateTo({
        url: '/pages/merchant/management'
      });
    },
    alipayAuth() {
      // 支付宝认证逻辑
      uni.showToast({
        title: '正在跳转支付宝认证',
        icon: 'none'
      });
    },
    wechatAuth() {
      // 微信认证逻辑
      uni.showToast({
        title: '正在跳转微信认证',
        icon: 'none'
      });
    },
    followOfficialAccount() {
      uni.showToast({
        title: '正在跳转关注公众号',
        icon: 'none'
      });
    },
    closeBottomTip() {
      // 关闭底部提示
    }
  }
}
</script>


<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 100rpx;
}

/* 顶部标题栏 */
.header {
  background-color: #f44336;
  color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
}

.plus-tag {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 4rpx 16rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
}

.plus-tag image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 6rpx;
}

.header-right {
  display: flex;
  align-items: center;
}

.dots {
  display: flex;
  margin-right: 20rpx;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 4rpx;
}

.circle-btn {
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
}

/* 交易金额卡片 */
.transaction-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 30rpx;
}

.transaction-title {
  color: #666;
  font-size: 28rpx;
}

.transaction-amount {
  font-size: 60rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.transaction-info {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
}

/* 快捷功能区 */
.quick-functions {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
}

.function-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  width: 48%;
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  font-size: 40rpx;
  color: #fff;
}

.bg-pink {
  background-color: #ff5252;
}

.bg-yellow {
  background-color: #ffb300;
}

.function-text {
  display: flex;
  flex-direction: column;
}

.function-title {
  font-size: 28rpx;
  font-weight: bold;
}

.function-desc {
  font-size: 24rpx;
  color: #999;
}

/* 认证提示 */
.auth-tip {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 30rpx;
}

.auth-tip > text {
  display: block;
  margin-bottom: 20rpx;
  color: #333;
  font-size: 28rpx;
}

.auth-buttons {
  display: flex;
  justify-content: space-between;
}

.auth-btn {
  width: 48%;
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}

.alipay-btn {
  background-color: #fff;
  border: 2rpx solid #1677ff;
  color: #1677ff;
}

.wechat-btn {
  background-color: #fff;
  border: 2rpx solid #07c160;
  color: #07c160;
}

.indicator {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.indicator .dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0 6rpx;
}

.indicator .dot.active {
  background-color: #f44336;
}

/* 功能图标区 */
.function-grid {
  margin: 20rpx;
}

.grid-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.grid-item {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 40rpx;
  color: #fff;
}

.grid-text {
  font-size: 24rpx;
  color: #333;
}

.bg-light-red {
  background-color: #ffebee;
  color: #f44336;
}

.bg-light-blue {
  background-color: #e3f2fd;
  color: #2196f3;
}

.bg-light-orange {
  background-color: #fff3e0;
  color: #ff9800;
}

.bg-light-purple {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.bg-light-pink {
  background-color: #fce4ec;
  color: #e91e63;
}

.bg-light-green {
  background-color: #e8f5e9;
  color: #4caf50;
}

.bg-light-yellow {
  background-color: #fffde7;
  color: #ffc107;
}

/* 底部提示 */
.bottom-tip {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}

.tip-content {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.tip-content .iconfont {
  margin-right: 10rpx;
}

.follow-btn {
  background-color: #f44336;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  margin: 0;
}

/* 底部导航栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 2rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.tab-item.active {
  color: #f44336;
}

.tab-item .iconfont {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}
</style>

